<template>
  <div id="app">
    <router-view @touchmove.prevent="handleGlobalTouch" @mousemove.prevent="handleGlobalMouse" />
  </div>
</template>

<script>
export default {
  methods: {
    handleGlobalTouch(e) {
      if (!e.target.closest('.draggable-area')) {
        e.preventDefault()
      }
    },
    handleGlobalMouse(e) {
      if (!e.target.closest('.draggable-area')) {
        e.preventDefault()
      }
    }
  }
}
</script>

<style>
body {
  touch-action: none;
}

.draggable-area {
  touch-action: pan-y;
}
</style>
<style lang="scss">
@import './assets/scss/variables.scss';
</style>
